<template>
  <view>
    <u-popup :show="show" @close="close" @open="opened">
      <view>
        <view style="height: 80vh; overflow: auto">
          <view v-if="!productId" class="product-list-page">
            <scroll-view
              enable-back-to-top
              scroll-y
              class="customer"
              :refresher-triggered="isTriggered"
              @scrolltolower="getCustomerData"
            >
              <view class="product-list">
                <view class="search-box">
                  <u-search
                    placeholder="关键词搜索"
                    v-model="queryParams.name"
                    @search="handleQuery"
                    @custom="handleQuery"
                    @change="handleQuery"
                    margin="0 20rpx"
                    :actionStyle="{
                      color: '#ffffff',
                    }"
                  ></u-search>
                </view>

                <view class="product">
                  <view
                    class="product-item"
                    v-for="item in customerList"
                    :key="item.productId"
                    @click="handleProduct(item)"
                  >
                    <image class="image" mode="aspectFill" :src="item.imageUrl"></image>
                    <view class="name"> {{ item?.productName }}</view>
                    <view class="price">
                      <text class="small">¥</text>
                      <text>{{ item?.price }}</text>
                    </view>
                  </view>
                </view>
                <!-- 底部提示文字 -->
                <view class="loading-text">
                  {{ isFinish ? '没有更多数据~' : '正在加载...' }}
                </view>
              </view>
            </scroll-view>
          </view>
          <view v-if="productId" class="product-details-page">
            <select-details :id="productId" @cancel="productId = undefined" @select="submitForm" />
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup name="CusPicker" lang="ts">
import { onMounted, ref } from 'vue'
import { getProductSelectListAPI } from '@/services/common'
import SelectDetails from '@/components/product/select-details.vue'

const emit = defineEmits(['select'])

const show = ref(false)
const customerId = ref<any>()
const productId = ref<any>()

// 基本案列数据
const customerList = ref<any[]>([])
const customerListSys = ref<any[]>([])

// 请求参数
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
})

const isLoading = ref(false)
// 是否分页结束
const isFinish = ref(false)
// 是否触发下拉刷新
const isTriggered = ref(false)

/** 重置 */
const reset = () => {
  queryParams.value.pageNum = 1
  queryParams.value.qwExternalUserid = ''
  customerList.value = []
  isFinish.value = false
}
/** 搜索按钮操作 */
const handleQuery = () => {
  reset()
  getCustomerData()
}

const getCustomerData = async () => {
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  // 退出分页判断
  if (isFinish.value === true) {
    return
  }
  // 发送请求前，标记为加载中
  isLoading.value = true
  // 发送请求
  const res = await getProductSelectListAPI(queryParams.value)
  // 发送请求后，重置标记
  isLoading.value = false
  // 数组追加
  customerList.value.push(...res.rows)
  // 分页条件
  if (customerList.value.length < res.total) {
    // 页码累加
    queryParams.value.pageNum++
  } else {
    // 分页已结束
    isFinish.value = true
  }
}

const open = async () => {
  show.value = true
}
const close = async () => {
  show.value = false
  productId.value = undefined
}
const opened = async (e) => {
  await getCustomerData()
}

const handleProduct = async (e) => {
  productId.value = e.productId
}

const submitForm = async (e: any) => {
  emit('select', e)
  close()
}

// 组件挂载完毕
onMounted(() => {})
// 暴露
defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
:host {
  display: block;
}

.product-list {
  background-color: #f7f7f7;
  min-height: 100vh;
  .search-box {
    padding-top: 4rpx;
    padding-bottom: 4rpx;
    background-color: #f56c6c;
    color: #ffffff;
  }
  .product {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;
    .product-item {
      width: 345rpx;
      padding: 24rpx 20rpx 20rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      background-color: #fff;
    }
    .image {
      width: 304rpx;
      height: 304rpx;
    }
    .name {
      height: 75rpx;
      margin: 10rpx 0;
      font-size: 26rpx;
      color: #262626;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .price {
      line-height: 1;
      padding-top: 4rpx;
      color: #cf4444;
      font-size: 26rpx;
    }
    .small {
      font-size: 80%;
    }
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>
